import React from "react"
import ReactDOM from "react-dom"
require('./ServiceEvaluation.less')

class ServiceEvaluation extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            mode: {
                "NoComment": "无评价",
                "NoReply": "无需回复",
                "HaveReply": "有回复" 
            }
        }
    }
   
    componentWillMount(){
        
    }

    makeNoComment() {
        return (
            <div>
                <div className="ServiceEvaluation-title">
                    服务评价
                </div>
                <div className="ServiceEvaluation-star no-comment">
                    <i className="iconfont icon-star orange"></i>
                    <i className="iconfont icon-star orange"></i>
                    <i className="iconfont icon-star orange"></i>
                    <i className="iconfont icon-star orange"></i>
                    <i className="iconfont icon-star orange"></i>
                </div>
            </div>
        )
    }

    makeNoReply(){
        const num = this.props.dataSource.score
        return(
            <div>
                <div className="ServiceEvaluation-title">
                    服务评价
                </div>
                <div className="ServiceEvaluation-star">
                    {new Array(5).fill().map((item,index)=>{
                        const class_name = num >= index+1 ? "orange" : ""
                        return (<i className={`iconfont icon-star ${class_name}`}
                                key={`icon${index+1}`}></i>)
                    })}
                </div>
                <div className="ServiceEvaluation-reply">
                    感谢您的评价，近邻宝会继续努力
                </div>
            </div>
        )
    }
    makeStar(num){
        return (
            <div className="ServiceEvaluation-star detail">
                 {new Array(5).fill().map((item,index)=>{
                    const class_name = num >= index+1 ? "orange" : ""
                    return (<i className={`iconfont icon-star ${class_name}`}
                            key={`icon${index+1}`}></i>)
                })}
            </div>
        )
    }

    MakeHaveReply() {
        const data = this.props.dataSource
        const hr = !!data.reply 
                ? <div className="ServiceEvaluation-hr">
                    <hr />
                </div>
                : null
        const reply = !!data.reply
                ? <div className="ServiceEvaluation-reply detail">
                    {"客服回复："+ data.reply}
                </div>
                : null        
        return (
            <div>
                <div className="ServiceEvaluation-title">
                    服务评价
                </div>
                {this.makeStar(data.score)}
                <div className="ServiceEvaluation-comment">
                    {data.comment}
                </div>
                {hr}
                {reply}
            </div>
        )
    }

    render() {
        let content = null
        const data = this.props.dataSource || {}
        if(data.mode === "NoComment") {
            //5星评价
            content = this.makeNoComment()
        }else if(data.mode === "NoReply") {
            content = this.makeNoReply()
        }else if(data.mode === "HaveReply") {
            content = this.MakeHaveReply()
        }

        return (
            <div className="ServiceEvaluation">
                {content}
                {this.props.can_cancel && <a href="javascript:;" className="weui-btn weui-btn_plain-orange"
                                             onClick={this.props.cancel.bind(this.props.this)}
                >取消订单</a>}

            </div>
        )
    }
}

module.exports = ServiceEvaluation